<template>
  <div class="invite">
    <div class="bg" ref="element">
      <div class="box" ref="qrCode" @click="show = true"></div>
    </div>
    <div class="bottom">
      <p>长按点击保存邀请二维码图片</p>
    </div>
    <van-overlay class="show" :show="show" @click="show = false">
      <div class="wrapper">
        <img id="poster" class="poster" />

      </div>
    </van-overlay>
  </div>

</template>
<script>
import QRCode from 'qrcodejs2'
import html2canvas from "html2canvas"
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      show: false,


    }
  },
  computed: {

  },
  watch: {

  },
  created () {


  },
  mounted () {

    let qrcode = new QRCode(this.$refs.qrCode, {
      text: 'Hellow QRCode!',
      width: (window.innerWidth) * 0.6346,
      height: (window.innerWidth) * 0.6346,
      colorDark: "black", // 二维码颜色
      colorLight: "#ffffff", // 二维码背景色
      correctLevel: QRCode.CorrectLevel.H // 容错率,L:容错率为 7%;M:容错率为 15%;Q:容错率为 25%;H:容错率为 30%. PS:容错级别越高抗残破或遮挡的能力就越强
    });

    qrcode.makeCode(`http://meiliyun.ganmiaoedu.com/view/login?from_uid=${this.$store.state.userInfo.user_id}`)

    setTimeout(() => {
      this.saveImage()
    }, 0);

  },
  methods: {
    // 保存图片
    saveImage () {
      // 配置项
      const setup = {
        useCORS: true, // 使用跨域
      };
      const img = document.querySelector('#poster')
      html2canvas(this.$refs.element, setup).then(canvas => {
        const dataURL = canvas.toDataURL("image/png");
        img.src = dataURL
        // this.exportPicture(link, "image");

      })
    },
    // saveQRCode () {

    //   html2canvas(document.querySelector(".bg"), {
    //     allowTaint: true,//是否允许跨域图像
    //     scale: 1,//用于渲染的比例
    //     backgroundColor: null,
    //   })

    //     .then((canvas) => {

    //       const base64 = canvas.toDataURL("image/png", 1).slice(22);

    //       this.exportPicture(base64)
    //     })

    //     .catch((e) => {

    //       console.log("html2canvas error:", e.message, e);
    //     })

    // },

    //安卓 ios移动端环境下载
    // downloadBase64Img (code) {

    //   let parts = code.split(';base64,');
    //   let contentType = parts[0].split(':')[1];
    //   let raw = window.atob(parts[0]);
    //   let rawLength = raw.length;
    //   let uInt8Array = new Uint8Array(rawLength);
    //   for (let i = 0; i < rawLength; ++i) {
    //     uInt8Array[i] = raw.charCodeAt(i);
    //   }

    //   let blob = new window.Blob([uInt8Array], { type: contentType }) // 转码
    //   const filename = '二维码分享.jpeg'
    //   const url = URL.createObjectURL(blob)
    //   const a = document.createElement('a')
    //   document.body.appendChild(a)
    //   a.href = url
    //   a.download = filename
    //   a.click();
    //   window.URL.revokeObjectURL(url)
    //   document.body.removeChild(a)
    // }

    //微信h5环境下载
    // 导出图片
    // exportPicture (link, name = "未命名文件") {
    //   console.log(link);
    //   const file = document.createElement("a");
    //   file.style.display = "none";
    //   file.href = link;
    //   file.download = decodeURI(name);
    //   document.body.appendChild(file);
    //   file.click();

    // },
  }
};
</script>
<style lang='less' scoped>
canvas {
  width: 238px !important;
  height: 238px;
}
.invite {
  display: flex;
  flex-direction: column;

  .bg {
    width: 100%;
    height: 653px;
    background: url('../../assets/img/inviteBg.png') no-repeat;
    background-size: cover;
    margin-top: -1px;
    .box {
      margin-top: 360px;
      display: flex;
      justify-content: center;
    }
  }
  .bottom {
    width: 375px;
    min-height: 71px;
    height: calc(100vh - 653px);

    background: radial-gradient(#f8d6af 0%, #f8c19a 100%);
    // background: radial-gradient(red 0%, blue 100%);
    display: flex;
    justify-content: center;
    p {
      margin: 0;
      text-align: center;
      font-size: 16px;
      color: #f33224;
    }
  }
}
.show {
  background-color: rgba(0, 0, 0, 0.8);
  .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    .poster {
      width: 80%;
      height: 80%;
    }
    .tips {
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      margin-top: 20px;
    }
  }
}
</style>